<template>
  <!-- :style="'width:'+width+'px'" -->
  <div class="atcard" :style="{width:width+'px'}">
    <div class="img_wrp">
      <img :src="ndata.img" alt="">
    </div>
    <div class="txt_wrp">
      <h3>{{ndata.title}}</h3>
      <p class="info">{{ndata.date}}</p>
      <p class="param">{{ndata.param}}</p>
    </div>
  </div>
</template>

<script>
export default {
  //props的另一种语法
  props:{
    ndata:{
      require:true   //表示父组件那边必须传这个属性的数据
    },
    width:{
      default:300   //父组件如果没有传，就用这个作为默认值
    }
  }
}
</script>

<style scoped>
.atcard{
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  margin: 20px 6px;
  background: #fff;
  display: inline-block;
  white-space:normal;
  border-radius: 12px;
  overflow: hidden;
}
.img_wrp{
  overflow: hidden;
}
.img_wrp img{
  width: 100%;
}
.txt_wrp{
  padding: 10px 20px 20px 20px;
}
.txt_wrp h3{
  color: #1d2845;
  font-size: 16px;
}
.txt_wrp .info{
  margin: 8px 0;
  font-size: 12px;
  color: #9099a7;
}
.txt_wrp .param{
  font-size: 14px;
  color: #9099a7;
}
</style>